<!--    系统配置 - 角色管理列表   jh -->
<template>
    <div>
        <div class="right">
            <el-row>
                    <div class="ca-title pull-left"><h3 class="h3">角色管理</h3></div>
                    <el-input
                        placeholder="角色名模糊查询"
                        v-model="ruleForm.name"
                        class="ca-w-280 ca-m-l-20 ca-m-r-10 pull-left"
                        @keyup.enter.native="getList"
                    >
                        <el-button @click="getList" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                    <div class="ca-pull-right">
                        <el-button icon="el-icon-plus" class="ca-color-download"   :disabled="!isAuthCreate" @click="addRole">&nbsp;创建角色
                        </el-button>
                    </div>
            </el-row>
            <div class="ca-m-t-15">
                <el-table
                    class="ca-table"
                    @sort-change="tableSort"
                    border
                    :data="tableData"
                    >
                    <el-table-column
                        label="序号"
                        width="80"
                        type="index" align="center">
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        property="roleName"
                        label="角色名称" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.roleName" placement="top" class="item">
                               <el-button  type="text" class="ca-text-over-flow-ellipsis"  :disabled="!isAuthEdit" @click="toDetail(scope.row)">{{ scope.row.roleName }}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="model"
                        label="模块">
                        <template slot-scope="scope">
                            <span>{{ scope.row.model?scope.row.model.substring(0,scope.row.model.length-1):''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        property="userCount"
                        label="用户数">
                        <template slot-scope="scope">
                            <el-button type="text" @click="toUser(scope.row)"> {{ scope.row.userCount }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        property="createTime"
                        label="创建时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.createTime | moment('YYYY-MM-DD HH:mm') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        sortable="custom"
                        property="roleStatus"
                        label="状态">
                        <template slot-scope="scope">
                             <!--<span>{{scope.row.roleStatus}}</span>-->
                            <!--1启用 2为禁用-->
                            <span>{{scope.row.roleStatus | getNameById('dataEnable')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="address"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button :disabled="!isAuthEable" @click="enableUser(scope.row.id,scope.row.roleStatus)" v-if="scope.row.roleStatus!==1" type="text">启用</el-button>
                            <el-button :disabled="!isAuthEable" @click="enableUser(scope.row.id,scope.row.roleStatus)" v-if="scope.row.roleStatus===1" type="text">禁用</el-button>
                            <el-button :disabled="!isAuthDel" @click="deleteClient(scope.$index,scope.row.id)" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination class="use-list-pagination"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="vuePageSizes"
                           :page-size="vuePageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                //权限
                isAuthSee: isNoAuth('系统配置-角色管理-查看'),
                isAuthCreate: isNoAuth('系统配置-角色管理-添加'),
                isAuthEdit: isNoAuth('系统配置-角色管理-修改'),
                isAuthDel: isNoAuth('系统配置-角色管理-删除'),
                isAuthEable: isNoAuth('系统配置-角色管理-启用/禁用'),
                guestRelationshipAll: this.$store.state.user.dictionaryMap.guestRelationship,
                tableData: [],//后台数据
                currentPage: 1, //当前页面
                totalCount: 0,//总页数
                ruleForm: {
                    pageIndex: 1,//查询页数
                    pageSize: this.vuePageSize,//每页数量
                    name: '',//搜索关键字
                    orderBy: 'createTime',//orderBy:为排序字段名,
                    sort: 'desc',//sort:为正序 asc 倒序 desc
                },
            }
        },
        watch: {

        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                if (!vm.isAuthSee) {
                    //vm.$message.error('没有此页面的操作权限');
                    vm.$message({
                        message: '没有此页面的操作权限',
                        type: 'error',
                        center: true
                    });
                    vm.$router.go(-1);
                    return;
                }
                vm.getList();
                //vm.getAuth();
            });
        },
        mounted() {
        },
        methods: {
            tableSort({prop, order }) {
                if ( prop && order) {
                    //排序顺序---为正序 asc 倒序 desc
                    if (order === 'ascending') {
                        this.ruleForm.sort = 'asc'
                    } else {
                        this.ruleForm.sort = 'desc'
                    }
                    //排序字段 prop.replace(/([A-Z])/g, '_$1').toLowerCase();
                    this.ruleForm.orderBy = prop
                    //调用列表
                    this.getList()
                }
            },
            //获取客户列表
            getList() {
                let params = Object.assign({},this.ruleForm)
                apiHttp(api.GET_ROLE_LIST,params).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.tableData = [...ret.data.resultData]
                        //添加一个字段
                        this.tableData.map((item)=>{
                                item.model = ''
                        })
                        //console.log(this.tableData,"角色列表")
                        //给字段赋值sub.roleName
                        this.tableData.map((item)=> {
                            item.menuList.map((sub)=> {
                                item.model = item.model + sub.name + '、'
                            })
                        })
                        this.totalCount = ret.data.totalCount
                    }
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.ruleForm.pageSize = val
                this.getList()
            },
            //当前页改变时会触发
            handleCurrentChange(val) {
                this.ruleForm.pageIndex = val
                this.getList()
            },
            //新建项目
            addRole() {
                this.$router.push({ name: 'system-settings-role-add',params: {roleId: '-1'}})
            },
            //详情页
            toDetail(row) {
                this.$router.push({ name: 'system-settings-role-add',params: {roleId: row.id,roleInfo: row}})
            },
            toUser(row) {
                this.$router.push({ name: 'system-settings-user-list',params: {roleId: row.id}})
            },
            //投资详情
            toInvestmentDetails(row) {
                this.$router.push({ name: 'client-management-investment-details',params: {eClient_bId: row.guestId,openWindow: true}})
            },
            //删除客户
            deleteClient(index,id) {
                this.$confirm('是否删除此角色?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id: id
                    }
                    let url = api.DELETE_ROLE
                    apiHttp(url,params).then(ret=> {
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                                center: true
                            });
                            this.tableData.splice(index, 1);
                            this.$store.dispatch('refreshFieldList'); //更新字典
                            //this.getList()
                        }
                    })
                },() => {
//                    this.$message({
//                        type: 'info',
//                        message: '已取消删除',
//                        center: true
//                    });
                })
            },
            //启用/禁用用户
            enableUser(id,status) {//status为角色现在的状态
                this.$confirm('是否改变用户状态?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id: id,
                    }
                    let message = ''
                    if (status !== 1) {
                        message = '启用角色成功!'
                    } else {
                        message = '禁用角色成功!'
                    }
                    apiHttp(api.ENABLE_USER,params).then(ret=> {
                        if (ret.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({
                                type: 'success',
                                message: message,
                                center: true
                            });
                            this.getList()
                            this.$store.dispatch('refreshFieldList'); //更新字典
                        }
                    })
                },() => {
//                    this.$message({
//                        type: 'info',
//                        message: '已取消删除',
//                        center: true
//                    });
                })
            }
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    /*分页样式*/
    .use-list-pagination{
        margin: 31px  25%;
    }
    .table-name{
        cursor: pointer;
        color: #20a0ff;
    }
</style>
